<template>
  <div class="feed-back">
    <Form ref="form">
      <CellGroup title="问题描述">
        <Field v-model="config.feedbackText"
          name="feedbackText"
          placeholder="您好，请简要描述您的问题或建议" rows="6"
          type="textarea" autocomplete="off"
          :rules="rules.feedbackText" />
      </CellGroup>
      <CellGroup title="联系方式">
        <Field v-model="config.information" name="information"
          placeholder="请填写qq号或手机号"
          autocomplete="off"
          :rules="rules.information" />
      </CellGroup>
      <CellGroup>
        <div class="btn-box">
          <Button type="primary"
            :loading="pageState.loading" block
            @click="handleUpdate">
            提交
          </Button>
        </div>
      </CellGroup>
    </Form>
  </div>
</template>
<script setup lang="ts">
import {
  Button,
  CellGroup, Field, Form,
} from 'vant';
import { ref } from 'vue';

import useFeedback from '../hooks/useFeedback';

const rules = ref({
  feedbackText: [{ required: true, message: '您好，请简要描述您的问题或建议' }],
  information: [{ required: true, message: '请填写qq号或手机号' }],
});

const {
  form, config, pageState, handleUpdate,
} = useFeedback();

</script>
<style lang="less" scoped>
.feed-back {
  height: 100%;
  display: flex;
  flex-direction: column;

  .btn-box {
    padding: 16px;
  }
}
</style>
